<template>
  <div class="comment_person">
    <div class="header_box">
      <header1View>
        <template v-slot:left>
          <div class="header_left">
            <van-icon name="arrow-left"
                      class="icon"
                      @click="back" />
          </div>
        </template>
        <template v-slot:center>
          <div class="header_center">
            评价配送员
          </div>
        </template>
        <template v-slot:right>
          <div>
            <button class="submit"
                    @click="submit">提交</button>
          </div>
        </template>
      </header1View>
    </div>
    <div class="content">
      <!-- 配送员姓名 -->
      <div class="personInfo">
        <span class="person">配送员:</span>
        <span class="p_name">张三送</span>
      </div>
      <!-- 配送评分 -->
      <div class="rate">
        <span>配送评分：</span>
        <span>
          <van-rate v-model="value"
                    @change="onChange" />
        </span>
        <span>{{valueWords}}</span>
      </div>
      <!-- 评价框 -->
      <div class="comment_words">
        <van-field v-model="message"
                   rows="2"
                   autosize
                   type="textarea"
                   placeholder="配送是否准时，穿戴是否整起，服务态度是否满意？"
                   placeholder-class="desc_words"
                   show-word-limit />
      </div>
      <!-- 匿名评价 -->
      <div class="niMing">
        <span>
          <van-checkbox v-model="checked">匿名评价</van-checkbox>
        </span>
        <span>评价列表中，不公开头像和昵称</span>
      </div>
    </div>

    <!-- 常用标签 -->
    <div class="label_words">
      <div>常用标签</div>
      <div class="labelList">
        <div v-for="item in labelList"
             :key="item.id"
             @click="changeColor(item.id)"
             :class="item.selected ? 'active' : ''"
             class="labelItem">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import header1View from '../../components/OrdersComponents/header1View'
export default {
  data () {
    return {
      value: 5,//默认评价星星数量
      checked: true,//匿名评价勾选
      labelList: [
        {
          id: 1,
          title: '配送准时',
          selected: false
        },
        {
          id: 2,
          title: '穿戴整齐',
          selected: false
        },
        {
          id: 3,
          title: '服务态度好',
          selected: false
        }
      ],
      message: '',
      valueWords: '非常好'
    }
  },
  components: {
    header1View
  },
  methods: {
    // 路由箭头返回
    back () {
      this.$router.go(-1)
    },
    // 头部提交按钮
    submit () {
      console.log(this.message);
      let arr = this.labelList.filter(item => {
        if (item.selected) {
          return item.title
        }
      })
      console.log(arr)
      this.$router.push({ path: '/MyReply', query: { message: this.message, value: this.value, labelArr: JSON.stringify(arr) } })
      // let aaa = JSON.parse(this.$route.query.labelArr)
    },
    // 改变颜色
    changeColor (id) {
      this.labelList.forEach((item) => {
        if (item.id == id) {
          item.selected = !item.selected
        }
      })
    },
    // 评分监听事件
    onChange (value) {
      console.log(value);
      if (value == 1) {
        this.valueWords = '非常差'
      } else if (value == 2) {
        this.valueWords = '差'
      } else if (value == 3) {
        this.valueWords = '一般'
      } else if (value == 4) {
        this.valueWords = '好'
      } else {
        this.valueWords = '非常好'
      }
    },
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  // outline: #000 solid;
}

.comment_person {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  font-size: 14px;
}
.header_box {
  background-color: #f5f5f5;
}
.header_left {
  color: #000;
}
.header_center {
  color: #000;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
.submit {
  background-color: #ff6e53;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  border: none;
  margin-right: 10px;
}
::v-deep .van-icon-arrow-left:before {
  color: #000;
  content: "\e668";
}
.content,
.label_words {
  margin: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
}
.content div {
  margin-top: 10px;
}
.comment_words {
  border-radius: 10px;
  height: 150px;
  padding: 5px;
  outline: solid #f5f5f5;
}
.niMing {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}
.van-icon-success:before {
  content: "\e728";
}
.van-icon:before {
  display: inline-block;
}
.labelList {
  display: flex;
  font-size: 12px;
  margin-top: 10px;
}
.labelItem {
  display: inline-block;
  height: 20px;
  margin: 5px;
  line-height: 20px;
  padding: 5px;
  border: #cdcdcd solid 1px;
}
.active {
  color: #ff6e53;
  border: #ff6e53 1px solid;
}
.icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -8px;
}
</style>